<template>
  <div class="police-scheduling">
    <div class="header row">
      <div class="col">时间</div>
      <div class="col">带班领导</div>
      <div class="col">值班民警</div>
      <div class="col">特警队员</div>
      <div class="col">联动警力</div>
    </div>
    <div ref="scroll-container" id="scroll-container">
      <div ref="content-container" id="content-container">
        <div class="body row" v-for="item in list" :key="item.time">
          <div class="col" v-html="item.time"></div>
          <div class="col" v-html="item.text1"></div>
          <div class="col" v-html="item.text2"></div>
          <div class="col" v-html="item.text3"></div>
          <div class="col" v-html="item.text4"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'PoliceScheduling',
  data(){
    return{
      list:[
        {
          time:'星期一',
          text1:'王峰<br/>(政委)',
          text2:'秦晓娟13893726322<br/>王泽民13893733323',
          text3:'郭嘉欣 赵琨 缐俊程',
          text4:'王赟鹏13830157622<br/>赵  帅15101730620'
        },
        {
          time:'星期二',
          text1:'王峰<br/>(政委)',
          text2:'许献林13893758180<br/>黄瑞基13893708757',
          text3:'赵一福 李琪 王瑶',
          text4:'王学海15209379279<br/>濮国成15701787887'
        },
        {
          time:'星期三',
          text1:'王峰<br/>(政委)',
          text2:'李永江13659363005<br/>史正堂18909377298',
          text3:'李思彤 仲民 程丹',
          text4:'宁  强15709371963<br/>赵光磊19809375969'
        },
        {
          time:'星期四',
          text1:'王峰<br/>(政委)',
          text2:'杨生涛18793729699<br/>马  遥18693733220',
          text3:'马波 马建国 张雪',
          text4:'邢金果18809370802<br/>李  欣19809371577'
        },
        {
          time:'星期五',
          text1:'王峰<br/>(政委)',
          text2:'王增军15101716060<br/>刘婷婷17393719102',
          text3:'郭嘉欣 赵琨 缐俊程',
          text4:'王赟鹏13830157622<br/>赵  帅15101730620'
        },
        {
          time:'星期六',
          text1:'王峰<br/>(政委)',
          text2:'秦晓娟13893726322<br/>王泽民13893733323',
          text3:'赵一福 李琪 王瑶',
          text4:'王学海15209379279<br/>濮国成15701787887'
        },
        {
          time:'星期日',
          text1:'王峰<br/>(政委)',
          text2:'许献林13893758180<br/>黄瑞基13893708757',
          text3:'李思彤 仲民 程丹',
          text4:'宁  强15709371963<br/>赵光磊19809375969'
        }
      ],
      timer:null
    }
  },
  methods:{
    startScrollTimer() {
      let scrollContainer = this.$refs['scroll-container']
      const contentContainer = this.$refs['content-container']
      const maxScrollTop = scrollContainer.scrollHeight - scrollContainer.offsetHeight
      this.currentScrollTop=0;
      if (contentContainer.offsetHeight - 10 > scrollContainer.offsetHeight) {
        //10px偏移，以防频闪
        this.timer = setInterval(() => {
          this.currentScrollTop += 1;
          if (this.currentScrollTop > maxScrollTop) {
            this.currentScrollTop = 0;
          }
          scrollContainer.scrollTop = this.currentScrollTop;
        }, 100)
      }
    },
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  mounted() {
    this.startScrollTimer()
  }
}
</script>
<style lang="scss" scoped>
.police-scheduling{
  width: 100%;
  height: 100%;
  #scroll-container{
    width: 100%;
    height: calc(100% - 45px);
    overflow: hidden;
  }
  #content-container{
    width: 100%;
  }
  .row{
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    .col{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 1.5;
    }
    .col:nth-child(1){
      width: 15%;
    }
    .col:nth-child(2){
      width: 15%;
    }
    .col:nth-child(3){
      width: 25%;
    }
    .col:nth-child(4){
      width: 20%;
    }
    .col:nth-child(5){
      width: 25%;
    }
  }
  .row.header{
    background: rgba(10, 167, 255, 0.15);
    height: 45px;
    .col{
      font-size: 12px;
    }
  }
  .row.body{
    background: rgba(10, 167, 255, 0.05);
  }
  .row.body:nth-child(odd){
    background: rgba(10, 167, 255, 0.1);
  }
}
</style>
